<template>
  <div id="orders">
      <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索框 -->
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="ordreInfo.query" class='searchInput'>
            <el-button slot="append" icon="el-icon-search"></el-button>
         </el-input>
        </el-col>
      </el-row>

      <!-- 主要内容区域 -->
      <el-table :data="goodsData" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number" width="300px"></el-table-column>
        <el-table-column label="订单价格" prop="order_price" width="90px"></el-table-column>
        <el-table-column label="是否付款" prop="order_pay" width="90px">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.order_pay">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" width="90px"></el-table-column>
        <el-table-column label="下单时间" prop="create_time" width="180px">
          <template slot-scope="scope">
            {{scope.row.create_time | filterDate}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="135px">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="success" icon="el-icon-location-outline" size="mini" @click="showProgressBox"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="ordreInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="ordreInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'orders',
  data () {
    return {
      ordreInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      goodsData: [],
      total: 0
    }
  },
  components: {
  },
  methods: {
    // 获取订单数据
    async getOrderData () {
      const { data: res } = await this.$http.get('orders', {
        params: this.ordreInfo
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // console.log(res)
      this.goodsData = res.data.goods
      this.total = res.data.total
    },
    // 分页功能 显示siza改变触发
    handleSizeChange (val) {
      this.ordreInfo.pagesize = val
      this.getOrderData()
    },
    // 分页功能 页数改变触发
    handleCurrentChange (val) {
      this.ordreInfo.pagenum = val
      this.getOrderData()
    },
    // 展示快递进度条  点击按钮触发
    async showProgressBox () {
      // ! 我没有相关的可以查询的单号链接之类的东西 可以给我来查询
      console.log('! 我没有相关的可以查询的单号链接之类的东西 可以给我来查询')
      // const { data: res } = await this.$http.get('/kuaidi/1106975712662')
      // if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // console.log(res)
    }
  },
  created () {
    this.getOrderData()
  }
}
</script>

<style>
  /* .searchInput {
    width: 40%!important;
  } */
  .el-pagination {
    margin-top: 20px;
  }
</style>
